import 'package:app/core/theme/app_size.dart';
import 'package:app/core/theme/app_style.dart';
import 'package:app/global_widgets/welcome_widget.dart';
import 'package:app/page/login/widget/login_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class LoginPage extends StatelessWidget {
  final LoginLogic logic = Get.put(LoginLogic());
  final LoginState state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Image.asset('assets/images/bg_login_header.png'),
            Column(
              children: [
                SizedBox(height: 760.h),
                ClipPath(
                  clipper: LoginClipper(),
                  child: LoginBodyWidget(),
                ),
              ],
            ),
            // Positioned(
            //   top: 64,
            //   left: 28,
            //   child: BackIcon(),
            // )
          ],
        ),
      ),
    );
  }
}

class LoginBodyWidget extends StatefulWidget {
  @override
  _LoginBodyWidgetState createState() => _LoginBodyWidgetState();
}

class _LoginBodyWidgetState extends State<LoginBodyWidget> {
  TextEditingController _nameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: double.maxFinite,
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 116.h),
          Text(
            '帐号',
            style: kBodyTextStyle,
          ),
          SizedBox(height: 4.h),
          TextField(
            controller: _nameController,
            decoration: InputDecoration(
              hintText: 'Email',
              border: kInputBorder,
              focusedBorder: kInputBorder,
              enabledBorder: kInputBorder,
              prefixIcon: Container(
                width: kIconBoxSize,
                height: kIconBoxSize,
                alignment: Alignment.center,
                child: Image.asset(
                  'assets/icons/icon_email.png',
                  width: kIconSize,
                  height: kIconSize,
                ),
              ),
            ),
            obscureText: false,
            style: kBodyTextStyle.copyWith(
              fontSize: 18,
            ),
          ),
          SizedBox(
            height: 16.h,
            width: double.infinity,
          ),
          Text(
            '密码',
            style: kBodyTextStyle,
          ),
          SizedBox(height: 4.h),
          TextField(
            controller: _pwdController,
            decoration: InputDecoration(
              hintText: 'Password',
              border: kInputBorder,
              focusedBorder: kInputBorder,
              enabledBorder: kInputBorder,
              prefixIcon: Container(
                width: kIconBoxSize,
                height: kIconBoxSize,
                alignment: Alignment.center,
                child: Image.asset(
                  'assets/icons/icon_pwd.png',
                  width: kIconSize,
                  height: kIconSize,
                ),
              ),
            ),
            obscureText: true,
            style: kBodyTextStyle.copyWith(
              fontSize: 18,
            ),
          ),
          SizedBox(height: 64.h),
          _loginButton(),
        ],
      ),
    );
  }

  Widget _loginButton() {
    return Row(
      children: [
        Spacer(),
        GradientBtnWidget(
          width: 360.w,
          child: Row(
            children: [
              SizedBox(width: 34.w),
              BtnTextWhiteWidget(
                text: 'Login',
              ),
              Spacer(),
              Image.asset(
                'assets/icons/icon_arrow_right.png',
                width: kIconSize,
                height: kIconSize,
              ),
              SizedBox(width: 24.w),
            ],
          ),
          onTap: () {
            var logic = Get.find<LoginLogic>();
            logic.login(_nameController.text, _pwdController.text);
          },
        )
      ],
    );
  }
}
